<template>
   <li>
        <input type="checkbox" :checked="list.IsOk" @click="handlerCheck">
        <span v-show="!list.IsEdit">{{list.title}}</span>
        <input v-show="list.IsEdit" type="text" :value="list.title" ref="content" @blur="showSpan($event)">
        <button class="btn-danger" @click="deleteTaskName">删除</button>
        <button v-show="!list.IsEdit" class="btn-edit" @click="editTaskName">修改</button>
   </li>
</template>
<script>

export default {
    Name:"MyItem",
    props:['list'],
    methods: {
        deleteTaskName(){
            // this.deleteItem(this.list.id)
            this.$bus.$emit('deleteItem',this.list.id)
        },
        handlerCheck(){
            // this.changeIsOk(this.list.id,this.list.IsOk)
            this.$bus.$emit('changeIsOk',this.list.id,this.list.IsOk)
        },
        editTaskName(){
            if(this.list.hasOwnProperty('IsEdit')){
                this.list.IsEdit = true
            }else{
                this.$set(this.list,'IsEdit',true)
            }
            this.$nextTick(()=>{
                this.$refs.content.focus()
            })
            
        },
        showSpan(event){
            this.list.IsEdit = false
            if(!event.target.value.trim()) {
                return alert("数据不可为空！")
            }
            this.$bus.$emit('updateTitleName',this.list.id,event.target.value)
        }

    },
}
</script>
<style scoped>
    li{
        overflow: hidden;
    }
    button{
        float: right;
        margin-right: 10px;
        border-radius: 5px;
    }

    li:hover button{
        cursor: pointer;
        display: block;
        
    }

    li:hover{
        background-color: #ddd;
    }
</style>